<!-- 封面模板样式 -->
<template>
  <div class="container flex justify-center align-center flex-wrap">
    <div class="frame" v-for="(x, index) in data" :key="index" style="page-break-after: always">
      <ul v-for="(item, index) in title" :key="index">
        <li style="margin: 0 15px">{{ x[toCamelCase(item.fieldName)] }}</li>
      </ul>
    </div>
    <div class="frame" v-if="data.length == 0">
      <ul v-for="(item, index) in title" :key="index">
        <li>档案盒</li>
      </ul>
    </div>
  </div>
</template>

<script>
import toCamelCase from '@/utils/toCamelCase.js'

export default {
  name: 'CoverStyle',
  components: {},
  props: {
    title: {
      type: Array,
      default: () => {
        return []
      },
    },
    data: {
      type: Array,
      default: () => {
        return []
      },
    },
  },
  data() {
    return {}
  },
  computed: {
    toCamelCase() {
      return function (str) {
        return toCamelCase(str)
      }
    },
  },
  watch: {},
  created() {},
  mounted() {},
  methods: {},
}
</script>
<style lang="less" scoped>
.frame {
  position: relative;
  width: 300px;
  height: 430px;
  margin: 20px 20px;

  &::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 5px solid #13196b;
  }
  &::before {
    content: '';
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    border: 2px solid #13196b;
  }
  ul {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    font-size: 36px;
    font-weight: 700;
    color: #13196b;
    li {
      border-bottom: 3px solid #13196b;
    }
  }
}
</style>
